import { useNavigation } from '@react-navigation/core'
import React,{ useState, useRef } from 'react'
import { StyleSheet, Text, View, TextInput, TouchableWithoutFeedback, Keyboard } from 'react-native'

interface Props {
  onChange?:any,
  editable?:any
}

const Header = (props: Props) => {
  const navigation = useNavigation()
  const navigateBack = () => {
    navigation.goBack()
  }
  const ref = useRef<any>()
  const [val, setVal] = useState('')
  return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={ navigateBack }>
          <View style={styles.location}>
            <Text style={styles.text}>返回</Text>
          </View>
        </TouchableWithoutFeedback>
        <View  style={styles.search}>
          <TextInput ref={ ref } onChangeText={text => setVal(text)} placeholder='请输入搜索关键词' editable={ props.editable }></TextInput>
        </View>
        <TouchableWithoutFeedback onPress={ () => {
          props.onChange(val)
          ref.current.isFocused=false
          Keyboard.dismiss()
        } }>
          <View style={styles.location}>
            <Text style={styles.text}>搜索</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
  )
}

export default Header

const styles = StyleSheet.create({
  container:{
    height: 44,
    backgroundColor:"#f55",
    display: 'flex',
    flexDirection:'row',
    alignItems:'center',
  },
  location:{
    display: 'flex',
    alignItems:'center',
    justifyContent:'center',
    flex: 1,
  },
  search:{
    flex: 8,
    backgroundColor:'#fff',
    borderColor:'#333',
    height: 30,
    borderRadius: 15,
    margin:5,
    paddingLeft:20
  },
  text:{
    color: '#fff',
    fontSize:16
  },
  titleText:{
    fontSize:18,
    color: '#fff'
  }
})
